import {
  getActivityData
} from './network/goodsActivity.js';
$(function() {
  class Activity {
    constructor() {
      this.init();
    }
    init() {
      this.initDom();
      this.loadActivityData();
      //初始化分页器参数
      this.options = {
        page_size: 20,
        page: 1,
        pagination_size: 5
      }
      //总页数
      this.total = 0;
    }
    initDom() {
      this.activity_list = $('#activity-list');
      //获取分页器容器
      this.pagination = $('#my-pagination');
    }
    //请求活动页数据并渲染
    async loadActivityData() {
      let res = await getActivityData();
      this.total = Math.ceil(res.data.length / this.options.page_size);
      this.render(res);
      this.renderPagination();
      this.bindEvent(res);
    }
    //渲染活动页
    render(res) {
      let start = (this.options.page - 1) * this.options.page_size;
      let end = start + this.options.page_size - 1;
      let html = ``;
      for(let i=start; i<=end; i++) {
        if(!res.data[i]) continue;
        html += `
        <li>
          <a href="${res.data[i].link}">
            <div class="img fl">
              <img data-src="${res.data[i].image}" alt="">
            </div>
            <div class="goods-info fl">
              <div class="title">
                ${res.data[i].title}
              </div>
              <div class="price">
                秒杀价
                <span class='price-text'>￥${parseFloat(res.data[i].salePrice).toFixed(2)}</span>
              </div>
              <div class="stock">
                <div class="text">已抢
                  <span class='stock-text'>${res.data[i].sales}</span>
                  件
                </div>
                <div class="process">
                  <div class="innerblock"></div>
                </div>
              </div>
              <div class="state">
                <button type="button">立即抢购</button>
                <span class='follow'>
                  仅剩<span class='follow-count'>${res.data[i].total - res.data[i].sales}</span>件
                </span>
              </div>
            </div>
          </a>
        </li>
        `;
      }
      this.activity_list.html(html);
      new LazyLoad('#activity-list li img');
    }
    //渲染分页器
    renderPagination() {
      let str = ``;
      let start = this.options.page - Math.floor(this.options.pagination_size / 2);
      let end = this.options.page + Math.floor(this.options.pagination_size / 2);
      if(start < 1) {
        start = 1;
        end = start + this.options.pagination_size - 1;
      }
      if(end > this.total) {
        end = this.total;
        start = end -this.options.pagination_size + 1;
      }
      if(start > 1) {
        str += `
          <i class="iconfont icon-zuojiantou prev-page"></i>
        `;
      }
      str += `
        <strong class='first-page'>首页</strong>
      `
      if(start > 1) {
        str += `
          <span>1</span>
          <b>...</b>
        `;
      }
      for(let i=start; i<=end; i++) {
        str += `
         <span ${i == this.options.page ? "class='active'" : ""}>${i}</span>
        `;
      }
      
      if(end < this.total) {
        str += `
          <b>...</b>
          <span>${this.total}</span>
        `;
      }
      str += `<strong class='last-page'>尾页</strong>`;
      if(end < this.total) {
        str += `
          <i class="iconfont icon-youjiantou next-page"></i>
        `;
      }
      this.pagination.html(str);
    }
    //绑定事件
    bindEvent(res) {
      let _this = this;
      this.pagination.on('click', 'span', function() {
        _this.options.page = parseInt($(this).text());
        _this.render(res);
        _this.renderPagination();
      });
      //前进后退按钮
      this.pagination.on('click', 'i', function() {
        if($(this).hasClass('prev-page')) {
          _this.options.page--;
          _this.render(res);
          _this.renderPagination();
        }else if($(this).hasClass('next-page')) {
          _this.options.page++;
          _this.render(res);
          _this.renderPagination();
        }
      });
      //首页尾页跳转
      this.pagination.on('click', 'strong', function() {
        if($(this).hasClass('first-page')) {
          _this.options.page = 1;
          _this.render(res);
          _this.renderPagination();
        }else if($(this).hasClass('last-page')) {
          _this.options.page = _this.total;
          _this.render(res);
          _this.renderPagination();
        }
      });
      //禁止选中分页器
      this.pagination.on('selectstart', function(e) {
        if(e.preventDefault) {
          e.preventDefault();
        }else {
          e.returnValue = false;
        }
      });
    }
  }
  new Activity();
})